<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册管理</title>
<link rel="stylesheet" href="/networkforum/css/user_info.css" />

<style type="text/css">
*{
	margin:0px;
	padding:0px;
	border:0px;
	vertical-align:middle;
}
.controlNav{
	margin:20px 0px;
	width:90%;
	height:60px;
	font:14px Arial, Helvetica, sans-serif;
	border-bottom:1px dashed #826462;
}
.controlNav span{
	line-height:25px;
	padding:0px 3px;
}
.controlNav span:first-child{
	float:left;
}
.gropPrivacy{
	margin-top:10px;
}
.gropPrivacy input{
	margin-right:40px;
}
#groupSave{
	cursor:pointer;
	padding:0px 15px;
	background-color:#E17744;
	display:inline-block;
	border-radius:3px;
	float:right;
}
#groupList{
	background-color: #fff;
}
#groupList li{
	list-style: none;
	width: 100%;
	height: 25px;
	line-height: 25px;
	vertical-align: middle;
	font-size: 13px;
}
#groupList li:hover{
	background-color: #ef0;
}
#groupList li span{
	display: inline-block;
	width: 100%;
	cursor: pointer;
}
/*************controlInner css*********************/
.controlInner{
	width:98%;
	min-height:300px;
}
.ulInner{
	width:100%;	
	min-height:300px;
	display:inline-block;
}
.ulInner li{
	width:25%;
	height:130px;
	list-style:none;
	margin-bottom:8px;
	float:left;
}
.ulInner li img{
	width:110px;
	height:110px;
}
.ulInner li span{
	font-size:13px;
	line-height:25px;
	display:inline-block;
}
.ulInner li input{
	width:5px;
	height:5px;
	display:inline;
	margin:0px 30px 0px 0px;
}
.ulInner li input:first-child{
	margin-left:5px;
}
#deletePicture{
	cursor: pointer;
}
#deletePicture:hover{
	color: red;
}
</style>
<script type="text/javascript">

var groups = [];
window.onload = function(){
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/picture/get_groups.do",function(d){
		//var data = eval("("+d+")");
		var data = toJson(d);
		groups = data;
	});
	myajax = null;
}
function showGroups(){
	var param={
		'targetId':"gn",
		'data':groups
	}
	var groupOption={
		'name':{
			'param':{
				'id':"groupName",
				'onmousedown':loadPictures
			},
			'bind':{
				'groupId':"groupId",
			}
		}
	}
	page.combo("groupList",param,groupOption);
	//page.view("ulInner",groups,groupOption);
}
var pictureOption = {
	'pictureSrc':{
		'param':{
			'id':"picture"
		},
		'bind':{
			'pictureId':"pictureId",
			'isPublic':"isPublic",
		}
	}	
}
function loadPictures(event){
	event = event||window.event;
	var target = event.target||event.srcElement;
	var groupId = target.groupId;
	
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/picture/group_pictures.do?index=0&size=50&groupId="+groupId,function(d){
		//var data = eval("("+d+")");
		var data = toJson(d);
		page.view.clear("ulInner",false);
		page.view("ulInner",data,pictureOption,true);
	});
	myajax = null;
}
var notice = true;
function deletePicture(obj){
	if(notice){
		if(!confirm("确认")){
			return;
		}
		else{
			if(!confirm("不在提示")){
				notice = false;
			}
		}
	}
	var target = obj.children[0];
	var pictureId = target.pictureId;
	document.getElementById("ulInner").removeChild(obj);
	
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/picture/delete_picture.do?pictureId="+pictureId,function(d){
		
	});
	myajax = null;
}
function updateLevel(){
	var nodes = document.getElementsByTagName("input");
	var param = [];
	for(var i =0;i<nodes.length;i++){
		if(nodes.pictureId){
			param.push(nodes.pictureId+""+nodes.checked?"true":"fasle");
		}
	}
	alert(param);
}
</script>
</head>

<body>
	<h2 class="header">相册设置</h2>
	<div class="controlNav">
		<span>相册</span><input id="gn" type="text" value="点击选择" onclick="showGroups();"/>
		<ul style="display:none" id="groupList">
			<li><span id="groupName"></span></li>
		</ul>
		<span id="groupSave" onclick="updateLevel();">保存</span>
	</div>
	<div class="controlInner">
		<ul class="ulInner" id="ulInner">
			<li style="display:none;">
				<img id="picture" src="/networkforum/images/left1.jpg" />
				<div>
					<span>公开</span><input type="checkbox" />
					<span id="deletePicture" onclick="deletePicture(this.parentElement.parentElement);">删除</span>
				</div>
			</li>
			
		</ul>
	</div>
</body>
<script type="text/javascript" src="/networkforum/js/view.js"></script>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
<script type="text/javascript" src="/networkforum/js/combo.js"></script>
</html>
